<template>
  <div>
    <div class="selectMonitor" style="background-color: rgba(17, 81, 153, 0.75) ">
      <div v-for="(item) in selected" class="selectItem"
           >
        <span class="el-icon-sort-up" style="color: #0694FF"></span>
        <el-button type="primary"
                   class="selectName"
                   @click="selectInfo"
                   :style="{'background-color': item.isSelected ? '#000000' : '#000000'}"
                    >{{item.value}}</el-button>
        <span class="el-icon-sort-down" style="color: #0694FF"></span>
      </div>
    </div>
    <div>
      <el-dialog title="筛选" :visible.sync="showSelect" :append-to-body="true" class="dialog-choose">
        <!-- 选项 -->
        <div v-for="(item,index) in selecteGather" style="display: flex; ">
          <span class="choose-name">{{item.value}} :</span>
          <el-select
              class="selectItem"
              v-model="selectedTemp[index]"
              @change="getSelectList"
          >
            <el-option v-for="(key) in item.option" :key="key" :label="key" :value="key">
            </el-option>
          </el-select>
        </div>
        <!-- 插入测试 -->
        <div slot="footer" class="dialog-footer">
          <el-button @click="submitSelect(false)">取 消</el-button>
          <el-button type="primary" @click="submitSelect(true)">搜 索</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import {getTrainSelectTree, getTrainInfo} from '@/api/api'

export default {
  name: "selectMonitor",
  data() {
    return {
      timer : null,
      trainData: [],
      selecteGather: [],
      selected: [
        {name: 'administration', value: '配属路局', isSelected: 0},
        {name: 'depots', value: '配属机务段', isSelected: 0},
        {name: 'type', value: '车型', isSelected: 0},
        {name: 'train', value: '车号', isSelected: 0},
        {name: 'capacity', value: '客/货类型', isSelected: 0},
        {name: 'line', value: '运行线路', isSelected: 0},
      ],
      selectedTemp: ['配属路局', '配属机务段', '车型', '车号', '客/货类型', '运行线路'],
      selectedName: ['配属路局', '配属机务段', '车型', '车号', '客/货类型', '运行线路'],
      showSelect : false,
      param : {},
      urlBase : process.env.VUE_APP_BASE_URL || "http://119.23.127.239:3333/phm-web-service-gz/"
    }
  },
  methods: {
    selectInfo: function (){
        this.showSelect = true;
    },
    getSelectList: function (){
      let that = this;
      let param = {};
      for (let i = 0 ; i < this.selected.length && i < this.selecteGather.length ; i++){
        this.selected[i].value =  this.selectedTemp[i] == '全部' ? this.selectedName[i]: this.selectedTemp[i];
        if (this.selected[i].value !== this.selecteGather[i].value){
          param [this.selected[i].name] = this.selected[i].value;
        }
      }
      console.log("param",param);
      getTrainSelectTree(param).then(res => {
        that.selecteGather = res.data.result;
      }).catch(err => {
        console.log(err);
      });
    },
    getTrainInfo: function (){
      this.$store.dispatch('gMonitor/getTrainData',this.param);
      this.$store.dispatch('gMonitor/getFaultData',this.param);
      this.$store.dispatch('gMonitor/getInfoData',this.param);
    },
    submitSelect: function (value){
      this.showSelect = false;
      if (value){
        this.param = {};
        for (let i = 0 ; i < this.selected.length ; i++){
          this.selected[i].value =  this.selectedTemp[i] == '全部' ? this.selectedName[i]: this.selectedTemp[i];
          if (this.selected[i].value === this.selecteGather[i].value){
            this.selected[i].isSelected = false;
          }
          else {
            this.selected[i].isSelected = true;
            this.param [this.selected[i].name] = this.selected[i].value;
          }
        }
        this.getTrainInfo();
        return;
      }
      for (let i = 0 ; i < this.selected.length ; i++){
        this.selectedTemp[i] =  this.selected[i].value;
      }
    },
    ini: function (){
      this.getSelectList();
      this.getTrainInfo();
      let that = this;
      if (!this.timer){
        this.timer = setInterval(function () {
          that.getTrainInfo();
        }, 5000);
      }
    }
  },
  mounted() {
    this.ini();
  },
  beforeDestroy() {
    if (this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
      clearInterval(this.timer); //关闭
    }
  }
}
</script>

<style>
.selectMonitor{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 1040px;
  height: 39px;
}

.selectMonitor .selectItem{
  height: 24px;
  opacity: 0.3;
  margin-right: 6px;
  margin-left: 6px;
}

.selectMonitor .selectName{
  height: 20px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 2px;
}

.dialog-choose{

}
/*弹窗*/
.dialog-choose .el-dialog, .el-pager li{
  background-color: #242F4F;
}
/*选项*/
.dialog-choose .el-select{
  display: flex;
  position: relative;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
  width: 145px;
  margin-bottom: 10px;
}

/*弹窗*/
.dialog-choose .el-dialog {
  width: 430px;
}

.dialog-choose .el-dialog__title{
  font-size: 16px;
  font-family: PingFang-SC-Heavy, PingFang-SC;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 22px;
}

.dialog-choose .choose-name{
  width: 120px;
  height: 12px;
  font-size: 12px;
  font-family: SourceHanSansCN-Heavy, SourceHanSansCN;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 18px;
}

</style>